<template>
	<view class="container" v-if="!isLoadingModal">
		<view class="confirm_address" v-if="!isHasExchange && isNeedAddress">
			<view class="btn" @click="onAddressClick">
				<view class="name" v-if="address==null">
					<view class="p">
						<text>请添加收货地址</text>
					</view>
				</view>
				
				<view class="name" v-if="address!=null">
					<view class="p">
						<text>{{address.name}}</text>
					</view>
					<view class="i">
						<text>{{address.mobile}}</text>
					</view>
				</view>
				
				<view class="u" v-if="address!=null">
					<text>{{address.address}}</text>
				</view>
				
				<image src="../../../static/fanli/9.png" mode="" class="go"></image>
			</view>
		</view>
		
		<view class="confirm_info" v-if="type=='selfSupportOrderlist'">
			<view class="dt">
				<text>支付信息</text>
			</view>
			
			<view class="dd">
				<view class="li">
					<view class="lb">
						<text>订单号：</text>
					</view>
					
					<view class="val">
						<text>{{cache.orderSn}}</text>
					</view>
				</view>
				
				<view class="li">
					<view class="lb">
						<text>订单金额：</text>
					</view>
					
					<view class="val">
						<text class="b">￥{{cache.orderTotal}}{{cache.orderTotalGift?"+"+cache.orderTotalGift+"礼品券":""}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="confirm_info" v-if="type != 'selfSupportOrderlist' && type != 'selfSupportGood' && type != 'oemSelfSupportGood' && type != 'vipCard'">
			<view class="dt">
				<text>支付信息</text>
			</view>
			
			<view class="dd">
				<view class="li">
					<view class="lb">
						<text>商品名称：</text>
					</view>
					
					<view class="val">
						<text>{{goodName}}</text>
					</view>
				</view>
				
				<view class="li">
					<view class="lb">
						<text>商品金额：</text>
					</view>
					
					<view class="val">
						<text class="b">￥{{goodPrice}}</text>
					</view>
				</view>
				
				<view class="li">
					<view class="lb">
						<text>数量：</text>
					</view>
					
					<view class="val">
						<text>{{goodNumber}}</text>
					</view>
				</view>
				
				<view class="li">
					<view class="lb">
						<text>运费：</text>
					</view>
					
					<view class="val">
						<text>免运费</text>
					</view>
				</view>
				
				<view class="li">
					<view class="lb">
						<text>总计：</text>
					</view>
					
					<view class="val">
						<text class="b">￥{{goodNumber*goodPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="confirm_self" v-if="type=='selfSupportGood' || type=='oemSelfSupportGood' || type=='vipCard'">
			<view class="goodinfo">
				<image :src="goodThumb" mode="" class="pic"></image>
				
				<view class="cite">
					<text class="name">{{goodName}}</text>
					
					<view class="tags">
						<view class="li" v-if="isHasExchange">
							<text>产品需到店兑换</text>
						</view>
						
						<view class="li" v-if="goodGiveGiftCard">
							<text>赠送{{goodGiveGiftCardSimple}}现金券</text>
						</view>
					</view>
					
					<view class="p">
						<text>规格：{{goodSpec.name}}</text>
					</view>
					
					<view class="price">
						<view class="b">
							<text>{{parseFloat(goodPrice) ? '￥'+goodPrice:''}}{{parseFloat(goodPrice)&&goodGiftPrice ? "+":""}}{{goodGiftPrice?goodGiftPrice+"礼品券":""}}</text>
						</view>
						
						<view class="i">
							<text>x{{goodNumber}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="num" v-if="from != 'NewMemberExclusive'">
				<text class="label">购买数量</text>
				
				<view class="input_bar">
					<view class="btn prev" @click="onNumberChange(false)">
						<text>-</text>
					</view>
					
					<input class="input" type="number" v-model="goodNumber" />
					
					<view class="btn next" @click="onNumberChange(true)">
						<text>+</text>
					</view>
				</view>
				
				<!-- <view class="input_bar" v-if="pageType != 1">
					<view class="val">
						<text>{{goodNumber}}</text>
					</view>
				</view> -->
			</view>
			
			<view class="confirm_shipping" v-if="!isHasExchange && shippingType == 1">
				<view class="dd">
					<view class="lb">
						<text>运费</text>
					</view>
					
					<view class="val">
						<text>包邮</text>
					</view>
				</view>
			</view>
			
			<view class="confirm_shipping" v-if="!isHasExchange && shippingType == 4">
				<view class="dd">
					<view class="lb">
						<text>运费</text>
					</view>
					
					<view class="val">
						<text>货到付款</text>
					</view>
				</view>
			</view>
			
			<view class="confirm_shipping" v-if="!isHasExchange && shippingType != 1 && shippingType != 4">
				<view class="way">
					<view class="title">
						<text>配送方式</text>
					</view>
					
					<view class="con">
						<view class="li">
							<text>{{shippingName}}</text>
						</view>
					</view>
				</view>
				
				<view class="dd">
					<view class="lb">
						<text>运费</text>
					</view>
					
					<view class="val">
						<text>{{shippingFee}}元</text>
					</view>
				</view>
				
				<view class="dd" v-if="shippingType == 2">
					<view class="lb">
						<text>货物总件数</text>
					</view>
					
					<view class="val">
						<text>{{goodNumber}}件</text>
					</view>
				</view>
				
				<view class="dd" v-if="shippingType == 3">
					<view class="lb">
						<text>货物总重</text>
					</view>
					
					<view class="val">
						<text>{{shippingWeight}}KG</text>
					</view>
				</view>
				
				<view class="dd">
					<view class="lb">
						<text>运费费率</text>
					</view>
					
					<view class="val">
						<text>{{shippingRule}}</text>
					</view>
				</view>
			</view>
			
			<view class="confirm_remarks">
				<view class="title">
					<text>备注</text>
				</view>
				
				<textarea class="textarea" v-model="remarks" placeholder="请输入..." />
			</view>
		</view>
		
		<view class="confirm_info confirm_payway" v-if="iTotal">
			<view class="dt">
				<text>支付信息</text>
			</view>
			
			<view class="dd">
				<view class="li">
					<view class="lb">
						<image src="../../../static/fanli/314.png" mode="" class="icon"></image>
						<text>微信支付</text>
					</view>
					
					<view class="val">
						<image src="../../../static/fanli/icon_checked.png" mode="" class="checked"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="price">
				<view class="big">
					<text class="p">总计：</text>
					<text class="i">{{iTotal ? "￥" : ''}}</text>
					<text class="b">{{iTotal || ''}}</text>
				</view>
			</view>
			
			<view class="btn" @click="onBuyClick">
				<text>支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		JSMRequest
	} from '@/module/api'
	import { formatDateTime, getOpenid } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				isLoadingModal: true,
				isLoadingFail: false,
				loadingFailMsg: "系统繁忙，请稍候再试",
				type: null,
				goodId: null,
				goodName: null,
				goodNumber: 1,
				goodPrice: null,
				goodThumb: null,
				cache: null,
				from: null,
				pageType: null,
				currentPayway: 0,
				payway:[
					{
						id:1,
						name:'微信',
						type:'wechart',
						icon: ''
					},
				],
				isNeedAddress: false,
				address: null,
				isLoadingView: false,
				currentOrdersn: null,
				moviesCardTips: '此视频卡为佳音会员限时特惠福利，先到先得！\n视频卡将直接充值到您的手机号上。充值成功后，在该视频的官网或APP直接使用此手机号登录即可。' ,
				remarks: '',
				isHasExchange: false,
				orderTotalGift: 0,
				goodGiftPrice: 0,
				goodGiveGiftCard: 0,
				goodGiveGiftCardSimple: null,
				shippingName: null,
				shippingFee: null,
				shippingRule: null,
				shippingType: null,
				shippingWeight: null,
				orderTotalCash: null,
			}
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			},
			
			iTotal () {
				let total = this.goodNumber*this.goodPrice
				if(this.type=='selfSupportGood'||this.type=='oemSelfSupportGood' || this.type=='vipCard'){
					total = this.orderTotalCash
				}
				if(this.type=='selfSupportOrderlist'){
					total = this.cache.orderTotal
				}
				return parseFloat(total)
			},
			
			iTotalGift () {
				let totalGift = 0
				if(this.type=='selfSupportGood'||this.type=='oemSelfSupportGood' || this.type=='vipCard'){
					totalGift = this.orderTotalGift
				}
				if(this.type=='selfSupportOrderlist'){
					totalGift = this.cache.orderTotalGift
				}
				return parseFloat(totalGift)
			}
		},
		
		onLoad(options) {
			let _t = this
			options.params = "%7B%22goodId%22%3A1076%2C%22goodName%22%3A%22%E6%B5%8B%E8%AF%95%E5%AE%9E%E6%96%BD%E6%98%AF222%22%2C%22goodNumber%22%3A1%2C%22goodSpec%22%3A%7B%22id%22%3A2%2C%22name%22%3A%22%E7%BA%A2%E8%89%B2%22%2C%22price%22%3A%225.00%22%2C%22stock%22%3A22%2C%22sort%22%3A1%7D%7D"
			let params = options.params || "{}"
			let requestAddress = true
			let requestCaculate = false
			let requestFinish = false
			
			params = JSON.parse(decodeURIComponent(params))
			
			this.goodNumber = params.goodNumber || 1
			this.goodName = params.goodName
			this.goodId = params.goodId
			this.goodSpec = params.goodSpec
			this.type = params.type || "selfSupportGood"
			
			this.getOrderCaculate()
			
			//监听选择地址
			WxNotificationCenter.addNotification("event_refresh_cart_confirm_user_address", params => {
				if(params.rn_status == 'deleted'){
					if(_t.address != null && _t.address.id == params.id){
						_t.address = null
						_t.updateOrderCaculate()
					}
				}else{
					_t.address = params
					_t.updateOrderCaculate()
				}
			}, this)
			
			//监听编辑地址
			WxNotificationCenter.addNotification("event_refresh_user_address", params => {
				if(_t.address != null){
					_t.getAddressData({
						success:res => {
							if(res.data && res.data!= []) _t.address = res.data;
						}
					})
				}
			}, this)
		},
		
		onUnload() {
			WxNotificationCenter.removeNotification("event_refresh_cart_confirm_user_address", this)
			WxNotificationCenter.removeNotification("event_refresh_user_address", this)
		},
		
		watch:{
			goodNumber () {
				if(this.goodNumber <= 0) this.goodNumber = 1
				if(!this.isLoadingModal){
					this.updateOrderCaculate()
				}
			}
		},
		
		methods: {
			redirectToSuccess () {
				uni.redirectTo({
					url: "/pages/cart/result-supplier/result-supplier?goodName="+this.goodName+"&price="+this.iTotal
				})
			},
			
			onNumberChange (up) {
				if(up){
					this.goodNumber ++
				}else{
					this.goodNumber --
				}
			},
			
			onAddressClick () {
				uni.navigateTo({
					url: "/pageMe/me/address/address?isSelect=true"
				})
			},
			
			getAddressData (params) {
				let _t = this
				
				JSMRequest({
					tag: "jsm-address",
					method: "POST"
				}).then((res) => {
					params.success(res)
				})
			},
			
			//计算订单金额
			getOrderCaculate (params) {
				let _t = this;
				let tag = '';
				let data = {
					num: this.goodNumber,
					good_id: this.goodId,
					attr_id: this.goodSpec.id,
				}
				
				JSMRequest({
					tag: "jsm-order-caculate",
					params: data
				}).then(res => {
					uni.hideLoading()
					if(res.data.address && res.data.address.province_name) _t.address = res.data.address
					_t.shippingName = res.data.shipping_name
					_t.shippingFee = res.data.shipping_fee
					_t.shippingType = res.data.shipping_type
					_t.orderTotalCash = parseFloat(res.data.total_fee)
					_t.goodThumb = res.data.goods_thumb
					_t.goodName = res.data.goods_name
					_t.goodPrice = res.data.shop_price
					_t.isNeedAddress = true
					_t.isLoadingModal = false
				}).catch(e => {
					uni.hideLoading()
					
				})
				
			},
			
			updateOrderCaculate () {
				let _t = this
				
				uni.showLoading({
					mask: true,
					title: "请求中..."
				})
				this.getOrderCaculate()
				
			},
			
			onBuyClick () {
				let _t = this
				if(this.isNeedAddress && this.address==null) return this.onAddressClick()
				
				uni.showLoading({
					mask: true,
					title: "请求中..."
				})
				
				// 根据支付类型请求相关接口
				switch (this.type){
					case 'selfSupportGood' : // 自营商城商品购买
						JSMRequest({
							tag: "jsm-order-submit",
							method: "POST",
							params: {
								good_id: this.goodId,
								attr_id: this.goodSpec.id,
								num: this.goodNumber,
								user_note: this.remarks
							}
						}).then(({data}) => {
							uni.hideLoading()
							// #ifdef MP-WEIXIN
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.timeStamp,
								nonceStr: data.nonceStr,
								package: data.package,
								signType: data.signType,
								paySign: data.paySign,
								success: function (res) {
									console.log('success:' + JSON.stringify(res))
									_t.redirectToSuccess()
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err))
									uni.showToast({
										icon: 'none',
										title: '支付失败'
									})
								}
							})
							// #endif
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: e.msg
							})
						})
						break;
					case 'selfSupportOrderlist' : // 我的订单 支付
						
						break;
				}
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less" scoped>
	.container{
		padding-bottom: 100px;
	}
	
	.confirm_tips{
		 background: #333333;
		 padding: 20px 30px;
		 
		 .p{
			 
			 text{
				 font-size: 26px;
				 color: #FFFFFF;
			 }
		 }
	}
	
	.confirm_vip_tips{
		background: #FFFFFF;
		padding: 20px 30px;
		
		.p{
					 
			 text{
				 font-size: 24px;
				 color: #FF3660;
			 }
		}
	}
	
	.confirm_address{
		width: 100%;
		padding: 0 30px;
		border-bottom: 1px solid #eee;
		background: #FFFFFF;
		box-sizing: border-box;
		
		.btn{
			height: 228px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;
			
			.name{
				display: flex;
				align-items: center;
				
				.p{
					font-size: 32px;
					color: #333333;
				}
				
				.i{
					font-size: 28px;
					color: #333333;
					margin-left: 30px;
				}
			}
				
			.u{
				font-size: 28px;
				color: #333333;
				margin-top: 20px;
				padding-right: 30px;
			}
			
			.go{
				position: absolute;
				width: 32px;
				height: 32px;
				right: 0;
				top: 98px;
			}
		}
	}
	
	.confirm_info{
		background: #FFFFFF;
		
		.dt{
			height: 92px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding-left: 30px;
			color: #999;
			font-size: 32px;
		}
		
		.dd{
			padding-left: 30px;
			
			.li{
				height: 92px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				justify-content: space-between;
				padding-right: 30px;
				
				.lb{
					font-size: 28px;
					color: #555555;
				}
				
				.val{
					max-width: 60%;
					font-size: 28px;
					color: #333;
					
					.b{
						color: #eb0000;
					}
				}
			}
		}
	}
	
	.confirm_self{
		background: #FFFFFF;
		display: flex;
		width: 100%;
		align-items: center;
		flex-direction: column;
		padding-top: 30px;
		
		.goodinfo{
			width: 690px;
			padding-bottom: 30px;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			
			.pic{
				width: 172px;
				height: 172px;
				border-radius: 6px;
			}
			
			.cite{
				width: 498px;
				
				.name{
					width: 100%;
					font-size: 26px;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.tags{
					display: flex;
					align-items: center;
					
					.li{
						font-size: 20px;
						color: #FF2D5E;
						border: 1px solid #FF2D5E;
						margin-top: 10px;
						margin-right: 10px;
						border-radius: 6px;
						padding: 6px 10px;
					}
				}
				
				.p{
					font-size: 24px;
					color: #999;
					margin-top: 16px;
				}
				
				.price{
					height: 40px;
					margin-top: 16px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.b{
						color: #E7261F;
						font-size: 26px;
					}
					
					.i{
						font-size: 26px;
						color: #999999;
					}
				}
			}
		}
		
		.num{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 690px;
			padding: 20px 0;
			box-sizing: border-box;
			border-bottom: 1px solid #eee;
			
			.label{
				font-size: 28px;
				color: #999999;
			}
			
			.input_bar{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				
				.val{
					font-size: 30px;
					color: #333;
				}
			}
			
			.btn{
				width: 48px;
				height: 48px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 8px;
				background-color: #E6E6E6;
			
				text{
					font-size: 30px;
					color: #666;
				}
			}
			
			.input{
				border-radius: 8px;
				background-color: #E6E6E6;
				width: 60px;
				margin: 0 4px;
				height: 48px;
				text-align: center;
				font-size: 24px;
				color: #333333;
			}
		}
		
		.confirm_shipping{
			width: 690px;
			
			.way{
				padding-top: 30px;
				
				.title{
					font-size: 30px;
					color: #333333;
				}
				
				.con{
					padding-top: 30px;
					padding-bottom: 20px;
					display: flex;
					
					.li{
						font-size: 26px;
						color: #E7261F;
						height: 60px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 8px;
						padding: 0 20px;
						border: 1px solid #E7261F;
					}
				}
			}
			
			.dd{
				height: 80px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.lb{
					font-size: 28px;
					color: #999999;
				}
				
				.val{
					font-size: 28px;
					color: #333;
					max-width: 60%;
				}
			}
		}
		
		.confirm_remarks{
			padding: 30px 0;
			width: 690px;
			
			.title{
				font-size: 28px;
				color: #333333;
			}
			
			.textarea{
				width: 100%;
				height: 120px;
				box-sizing: border-box;
				font-size: 28px;
				color: #333333;
				background: #f8f8f8;
				border-radius: 8px;
				margin-top: 30px;
				padding: 20px;
			}
		}
	}
	
	.confirm_payway{
		margin-top: 20px;
		padding-bottom: 20px;
		
		.dt{
			border-bottom-width: 0;
		}
		
		.dd{
			
			.li{
				height: 100px;
				border-bottom-width: 0;
				
				.lb{
					display: flex;
					align-items: center;
					
					.icon{
						width: 60px;
						height: 60px;
						margin-right: 20px;
					}
				}
				
				.val{
					
					.checked{
						width: 30px;
						height: 30px;
					}
				}
			}
		}
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100px;
		background: #FFFFFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(122,142,216,0.27);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		
		.btn{
			width: 240px;
			height: 100px;
			background: linear-gradient(90deg,rgba(232,39,32,1) 0%,rgba(255,77,123,1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			
			text{
				font-size: 32px;
				color: #FFFFFF;
			}
		}
		
		.price{
			padding-left: 30px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			
			.big{
				display: flex;
				align-items: center;
				flex-direction: row;
				
				.p{
					color: #333;
					font-size: 24px;
					padding-top: 5px;
				}
				
				.i{
					color: #FF2D5E;
					font-size: 24px;
					padding-top: 5px;
				}
				
				.b{
					color: #FF2D5E;
					font-size: 32px;
				}
			}
			
			.dfn{
				color: #666;
				font-size: 22px;
			}
		}
	}
</style>
